<template>
  <div class="station-detail p-10">
    <p class="station-name">{{ infoData.name }}</p>
    <p>
      <span class="title">{{ $t('JOINT_SPECIFICATIONS') }}：</span>
      <span class="detail">{{ infoData.jointSpecifications }}</span>
    </p>
    <p>
      <span class="title">{{ $t('APPLICATION') }}：</span>
      <span class="detail">{{ infoData.application }}</span>
    </p>
    <p>
      <span class="title">{{ $t('CONNECTION_METHOD') }}：</span>
      <span class="detail"> {{ infoData.connectionMethod }} </span>
    </p>
    <p>
      <span class="title">{{ $t('IMPORT_EXPORT_INFORMATION') }}：</span>
      <span class="detail">{{ infoData.inAndOut }} </span>
    </p>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { get } from 'lodash'

  export default {
    props: {
      params: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        info: {
          facilityName: '',
          facilityType: '',
          longitude: '',
          latitude: ''
        },
        regionList: []
      }
    },
    computed: {
      ...mapGetters(['dictMap']),
      infoData() {
        return {
          name: this.params.nodeName,
          jointSpecifications: get(this.params, 'properties.spliceClosure.number', ''),
          application:
            this.dictMap.APPLICATION[
              get(this.params, 'properties.spliceClosure.useOccasionType', '')
            ],
          connectionMethod:
            this.dictMap.CONNECTION_METHOD[
              get(this.params, 'properties.spliceClosure.connectionModeType', '')
            ],
          inAndOut: this.$t('IN_AND_OUT', {
            in: get(this.params, 'properties.spliceClosure.inputList', []).length || 1,
            out: get(this.params, 'properties.spliceClosure.outputList', []).length || 1
          })
        }
      }
    },
    mounted() {
      console.log(this.params)
    }
  }
</script>
